import * as turf from "@turf/turf";
import { Map } from "mapbox-gl";
import { ILayerProps } from "src/types/index";
import Base from "./Base";
export default class AreaCenterLayer extends Base {
  layerId: string;
  constructor(map: Map, layerProps: ILayerProps) {
    let SOURCE_NAME = "AreaCenterLayer";
    super(map, layerProps, SOURCE_NAME);
    this.layerId = this.getLayerName("default")

    this.init();
  }

  init() {
    this.map.addSource(this.sourceId, {
      type: "geojson",
      data: turf.featureCollection(this.features) as any,
    });

    //区域中心
    this.map.addLayer({
      id: this.layerId,
      type: "symbol",
      source: this.sourceId,
      layout: {
        "text-field": ["get", "name"], // 此属性对应图标注释,必须拥有
        "text-offset": [0, 0.25], // 设置图标与图标注相对之间的距离
        "text-anchor": "top",
        "text-font": ["Open Sans Bold", "Arial Unicode MS Bold"],

        "text-size": 15,

        "text-transform": "uppercase",

        "text-letter-spacing": 0.1,
      },
      paint: {
        "text-halo-color": "#2568AE",
        "text-halo-width": 2,
        "text-color": "#fff",
      },
      /*  filter: ['==', '$type', 'Point'] */
    });
  }

  formatChildrenList(children = [], propertiesCallback: (v: any) => any) {
    let datas: any[] = [];
    children.forEach((item) => {
      // @ts-ignore
      const bbox = turf.bbox(item.geometry);
      // @ts-ignore
      const bboxPolygon = turf.bboxPolygon(bbox);
      // @ts-ignore
      const center = turf.centerOfMass(bboxPolygon);
      center.properties =
        typeof propertiesCallback !== "function"
          ? {}
          : propertiesCallback(item);
      datas.push(center);
    });
    return datas;
  }
}
